<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加菜单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
	<link rel="stylesheet" href="../../libme/modules/dtree/dtree.css">
	<link rel="stylesheet" href="../../libme/modules/dtree/font/dtreefont.css">
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<!--<form class="layui-form layui-form-pane ok-form">-->
	<form class="layui-form ok-form" lay-filter="permission">
		<div class="layui-form-item">
			<label class="layui-form-label">菜单名称</label>
			<div class="layui-input-block">
				<input type="text" name="title" placeholder="请输入菜单名称" autocomplete="off" class="layui-input" lay-verify="required">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">菜单类型</label>
			<div class="layui-input-block">
				<input type="radio" name="type" value="M" title="目录" lay-filter="type" checked>
				<input type="radio" name="type" value="C" title="菜单" lay-filter="type">
				<input type="radio" name="type" value="F" title="按钮" lay-filter="type">
			</div>
		</div>

		<div class="layui-form-item layui-hide">
			<label class="layui-form-label">菜单Code</label>
			<div class="layui-input-block">
				<input type="text" name="menuCode" placeholder="请输入菜单Code" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">菜单链接</label>
			<div class="layui-input-block">
				<input type="text" name="href" placeholder="请输入菜单链接" autocomplete="off" class="layui-input" lay-verify="required">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">图标类型</label>
			<div class="layui-input-block">
				<input type="radio" name="fontFamily" value="ok-icon" title="ok-icon" checked>
				<input type="radio" name="fontFamily" value="layui-icon" title="默认" disabled>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">图标样式</label>
			<div class="layui-input-block">
				<input type="radio" name="icon" value="ok-icon-file" title="ok-icon-file" checked>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">上级菜单</label>
			<div class="layui-input-inline">
				<ul id="menus" class="dtree" data-id="0" ></ul>
			</div>
			<button type="button" class="layui-btn layui-btn-primary" id="mreset">顶级目录</button>
		</div>



		<div class="layui-form-item">
			<label class="layui-form-label">权限</label>
			<div class="layui-input-inline">
				<!--<input type="text" id="permissionId" name="permissionId"/>-->
				<!--<input type="text" id="permissionName" name="permissionName"/>-->
				<ul id="permissions" class="dtree" data-id="0" ></ul>
			</div>
			<button type="button" class="layui-btn layui-btn-primary"  id="preset">清空权限</button>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">排序号码</label>
			<div class="layui-input-block">
				<input type="text" name="sortno" placeholder="请输入0 - 999 的任意数值" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<input type="text" name="remark" placeholder="请输入备注" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script src="../../libme/pages/body.js"></script>
<script type="text/javascript">
	layui.use(["element", "form", "dtree", "okLayer", "okUtils", "jquery","okMock","api","layer"], function () {
		let form = layui.form;
		let dtree = layui.dtree;
		let okLayer = layui.okLayer;
        let okMock = layui.okMock;
        let $ = layui.jquery;
        let layer = layui.layer;
        let api = layui.api;
		okLoading.close();

        form.on('radio(type)', function(data){
            //console.log(data.elem); //得到radio原始DOM对象
            //console.log(data.value); //被点击的radio的value值
            const v = data.value;
            if(v == 'M'){
                $('input[name="menuCode"]').parents('.layui-form-item').addClass('layui-hide');
                //$('input[name="href"]').val('#').prop('disabled',true)//addClass('layui-disabled');
                $('input[name="href"]').val('#').parents('.layui-form-item').addClass('layui-hide');
                $('#menus').parents('.layui-form-item').addClass('layui-hide');
				mReset();
            }else if(v == 'C'){//菜单
                $('input[name="menuCode"]').parents('.layui-form-item').addClass('layui-hide');
                //$('input[name="href"]').val('').prop('disabled',false)//.removeClass('layui-disabled');
                $('input[name="href"]').val('').parents('.layui-form-item').removeClass('layui-hide');
                $('#menus').parents('.layui-form-item').removeClass('layui-hide');
            }else if(v == 'F'){//按钮
                $('input[name="menuCode"]').parents('.layui-form-item').removeClass('layui-hide');
                //$('input[name="href"]').val('#').prop('disabled',true)//.addClass('layui-disabled');
                $('input[name="href"]').val('#').parents('.layui-form-item').addClass('layui-hide');
                $('#menus').parents('.layui-form-item').removeClass('layui-hide');
            }
        });

        form.on("submit(add)", function (data) {
			// TODO 权限节点校验
			if(data.field.type !== 'M'){
                if(data.field.parentId === '') {
            		api.yellowQuestionMsg('请选择一个上级菜单。');
            		return false;
        		}
			}
            //return false;
			api.request({
				url:okMock.api.menu.createAndGrant,
				where: data.field,
				dataType: api.jsonType.ujson
			},function (resp, stat) {
                api.greenTickMsg("添加成功", function () {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            }
            // ,null,function (resp) {
				// if(resp.code == api.responseCode.user.permissionFailure) {
            //         api.redCrossMsg("have no permission")
            //     }}
            )
			return false;
		});


        var menuDtree = dtree.renderSelect({
            //  obj: $(layero).find("#openTree1"),    如果直接用elem加载不出来，则可以使用这个方式加载jquery的DOM
            elem: "#menus",
            url: okMock.api.menu.dtree,
            dataStyle: "layuiStyle",
            dataFormat: "list",
            response:{
                statusCode: 100,
            },
			line: true,
            width: "100%",
            selectCardHeight: "150",
            selectInputName: {
                nodeId: "parentId",
                //context: "context"
            },
            selectTips: "顶级目录",
            done: function(res, $ul, first){
                if(first) {
                }
            }
        });
        dtree.on('node("menus")', function(obj){
            var param = dtree.selectVal("menus");
            // console.log("------- menu obj ");
            // console.log(obj.param);
            // console.log(obj.param.basicData);
            // console.log("------- selectVal");
            // console.log(param);
            // layer.msg(JSON.stringify(param));
            // layer.msg(JSON.stringify(param));
        });


        var permissionDtree = dtree.render({
            elem: "#permissions",
            url: okMock.api.permission.dtree,
            dataStyle: "layuiStyle",
            dataFormat: "list",
            response:{
                statusCode: 100,
            },
            selectTips: "请选择权限",
            initLevel : 1,
            line: true,
            width: "100%",
			select: true,
            selectCardHeight: "150",
            selectInputName: {
				//nodeId: "permissionId": noteId 是 选中 的option 返回 param 中的其中一个key值。如{noteId:1000, content:'世界'...}, 此noteId 就是对应此处。 permissionId 是对应隐藏input中的name字段
				//上述又相当于给 noteId 起一个 permissionId 的别名，给contenxt 起一个 permissionName 的别名
                nodeId: "permissionId",
                context: "permissionName"
            },
            // checkbar:true, //开启复选框
            // checkbarType: "only",
            // checkbarData: "halfChoose",
            done: function(res, $ul, first){
                if(first) {
                }
            }
		});
        dtree.on('node("permissions")', function(obj){
            // param 中的成员 : leaf/parentId/noteId/context/level/spread
            var param = dtree.selectVal("permissions");

            //$('#permissionId').val(param.noteId);
            //$('#permissionName').val(param.context);
			//console.log("------- obj ");
			//console.log(obj.param);
			//console.log(obj.param.basicData);
			//console.log("------- selectVal");
			//console.log(param);
            //layer.msg(JSON.stringify(param));
        });

        $("#mreset,#reset").click(function(){
            mReset();
        });
        $("#preset,#reset").click(function(){
            pReset();
        });
        
        function mReset() {
            menuDtree.selectResetVal();
        }
        
        function pReset() {
            permissionDtree.selectResetVal();
        }
        $("body").on("click", function(event){
            $("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
            $("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
        });


        $(function () {//页面加载

        })
	})
</script>
</body>
</html>
